<script setup lang="ts">
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, onMounted, reactive, withDefaults, defineProps, toRaw } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { tallyListApi } from "@/api/projectApi";
const { loading, columns, Empty, onCurrentChange } = useColumns();
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {}
  }
});
const dataList = ref(props.data?.list)

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  layout: "prev, pager, next",
  total: 0,
  align: "center"
});
onMounted(() => {
  pagination.total = props.data?.total ?? 0;
});

</script>

<template>
  <pure-table
    row-key="id"
    alignWhole="center"
    showOverflowTooltip
    :loading="loading"
    :loading-config="{ background: 'transparent' }"
    :data="dataList.slice(
        (pagination.currentPage - 1) * pagination.pageSize,
        pagination.currentPage * pagination.pageSize
      )"
    :columns="columns"
    :pagination="pagination"
    @page-current-change="onCurrentChange"
  >
    <template #empty>
      <el-empty description="暂无数据" :image-size="60">
        <template #image>
          <Empty />
        </template>
      </el-empty>
    </template>

  </pure-table>
</template>

<style lang="scss">
.pure-table-filter {
  .el-table-filter__list {
    min-width: 80px;
    padding: 0;

    li {
      line-height: 28px;
    }
  }
}
.tableHome {
  .el-table__body,.el-scrollbar__view {
    height: 100%;
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>
